import { useState, useRef, useEffect } from 'react'
import { View, Text, Input, Button, ScrollView } from '@tarojs/components'
import './index.scss'

// AI回复函数 - 调用后端DeepSeek API接口
const getAIResponse = async (userMessage) => {
  try {
    // 调用后端DeepSeek API接口
    const response = await fetch('http://localhost:3000/dify/chat-messages', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        message: String(userMessage).trim(), // 确保消息是字符串类型
        files: [],
        conversationId: '' // 修改参数名为 conversationId
      })
    })
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }
    
    // 处理流式响应
    const reader = response.body?.getReader()
    if (!reader) {
      throw new Error('无法获取响应流')
    }
    
    const decoder = new TextDecoder()
    let result = ''
    
    try {
      while (true) {
        const { done, value } = await reader.read()
        if (done) break
        
        const chunk = decoder.decode(value, { stream: true })
        const lines = chunk.split('\n')
        
        for (const line of lines) {
          if (line.trim() && line.startsWith('data: ')) {
            try {
              const jsonStr = line.slice(6).trim()
              if (jsonStr && jsonStr !== '[DONE]') {
                const data = JSON.parse(jsonStr)
                
                // 适配Dify API的原始响应格式
                if (data.event === 'message' && data.answer) {
                  result += data.answer
                } else if (data.event === 'agent_message' && data.answer) {
                  // Dify工作流可能使用agent_message事件
                  result += data.answer
                } else if (data.event === 'workflow_started' || data.event === 'node_started') {
                  // 工作流开始事件，不需要处理
                } else if (data.event === 'error') {
                  // 错误事件处理 - 优先处理错误事件
                  console.error('❌ 工作流错误:', data.message || data.error)
                  throw new Error(data.message || data.error || '工作流执行失败')
                } else if (data.event === 'workflow_finished' || data.event === 'message_end') {
                  // 工作流结束事件
                } else if (data.answer) {
                  // 兜底：如果有answer字段就使用
                  result += data.answer
                }
              }
            } catch (parseError) {
              console.warn('解析SSE数据失败:', parseError, '原始数据:', line)
            }
          }
        }
      }
    } finally {
      reader.releaseLock()
    }
    
    return result || '抱歉，我暂时无法处理您的请求。'
    
  } catch (error) {
    console.error('调用AI接口失败:', error)
    // 提供更详细的错误信息
    if (error.name === 'TypeError' && error.message.includes('fetch')) {
      throw new Error('网络连接失败，请检查网络设置')
    } else if (error.message.includes('HTTP error')) {
      throw new Error(`服务器错误: ${error.message}`)
    }
    throw error
  }
}

const zpf = () => {
  const [messages, setMessages] = useState([
    { id: 1, text: '您好！我是AI助手，请问有什么可以帮您？', isUser: false }
  ])
  const [inputValue, setInputValue] = useState('')
  const [isLoading, setIsLoading] = useState(false)
  const scrollViewRef = useRef(null)

  // 发送消息处理
  const handleSendMessage = async () => {
    if (!inputValue.trim() || isLoading) return
    
    const currentInput = inputValue.trim()
    const timestamp = Date.now()
    
    const userMessage = {
      id: `user_${timestamp}`,
      text: currentInput,
      isUser: true
    }
    
    // 添加用户消息
    setMessages(prev => [...prev, userMessage])
    setInputValue('')
    setIsLoading(true)
    
    try {
      // 获取AI回复
      const aiResponse = await getAIResponse(currentInput)
      
      const aiMessage = {
        id: `ai_${timestamp}`,
        text: aiResponse,
        isUser: false
      }
      
      // 添加AI回复
      setMessages(prev => [...prev, aiMessage])
    } catch (error) {
      console.error('获取AI回复失败:', error)
      
      const errorMessage = {
        id: `error_${timestamp}`,
        text: error.message || '抱歉，我暂时无法处理您的请求，请稍后再试。',
        isUser: false
      }
      
      setMessages(prev => [...prev, errorMessage])
    } finally {
      setIsLoading(false)
    }
  }

  // 自动滚动到底部
  useEffect(() => {
    // 在Taro中，ScrollView的滚动需要通过scrollTop属性控制
    // 这里可以通过设置一个很大的值来滚动到底部
    const timer = setTimeout(() => {
      // 延迟执行确保DOM更新完成
      if (scrollViewRef.current) {
        // 在Taro中可以通过其他方式实现滚动到底部
      }
    }, 100)
    
    return () => clearTimeout(timer)
  }, [messages])

  return (
    <View className="ai-assistant-container">
      {/* 标题栏 */}
      <View className="header">
        <Text className="title">AI智能助手</Text>
      </View>
      
      {/* 聊天消息区域 */}
      <ScrollView 
        className="message-list" 
        scrollY 
        ref={scrollViewRef}
      >
        {messages.map((message) => (
          <View 
            key={message.id} 
            className={`message ${message.isUser ? 'user-message' : 'ai-message'}`}
          >
            <View className="message-content">
              <Text>{message.text}</Text>
            </View>
          </View>
        ))}
        
        {isLoading && (
          <View className="message ai-message">
            <View className="message-content loading">
              <Text>AI正在思考中...</Text>
            </View>
          </View>
        )}
      </ScrollView>
      
      {/* 输入区域 */}
      <View className="input-area">
        <Input
          className="input"
          value={inputValue}
          onInput={(e) => setInputValue(e.detail.value)}
          placeholder="请输入您的问题..."
          disabled={isLoading}
          onConfirm={handleSendMessage}
        />
        <Button 
          className="send-button" 
          onClick={handleSendMessage}
          disabled={isLoading || !inputValue.trim()}
        >
          {isLoading ? '发送中...' : '发送'}
        </Button>
      </View>
    </View>
  )
}

export default zpf